<template>
  <div class="statistics">
    <Map ref="Mapc"></Map>

    <!--地图侧边栏-->
    <div class="mapLeft">
      <div class="timecs">
        <el-date-picker
          v-model="time"
          @change="chooseTime"
          type="daterange"
          placeholder="选择日期">
        </el-date-picker>
      </div>

      <div id="bar" style="width: 100%;height: calc((100% - .6rem)/2)"></div>

      <div id="bar2" style="width: 100%;height: calc((100% - .6rem)/2)"></div>

    </div>
    <!--地图侧边栏-->

    <!--选择-->
    <div class="bottomshow">
      <el-checkbox-group @change="drawPoint" v-model="checkList">
        <el-checkbox style="color: #21EB00" label="健康"></el-checkbox>
        <el-checkbox style="color: #FFBE16" label="异常"></el-checkbox>
        <el-checkbox style="color: #FF2626" label="死亡"></el-checkbox>
      </el-checkbox-group>

      <div style="margin-top: .2rem;"></div>
      <el-radio style="font-size: .16rem;" @change="drawPoint" v-model="dr" label="1">点位分布</el-radio>
      <el-radio style="font-size: .16rem;" @change="drawPoint" v-model="dr" label="2">热力分布</el-radio>
    </div>
    <!--选择-->
  </div>
</template>

<script>
  import Map from './Map'
  import http from '../utils/http'
  import api from '../utils/api'

  import * as echarts from 'echarts';

  export default {
    name: "statistics",
    components: {Map},
    data() {
      return {
        dr: '1',
        checkList: [],
        areaId: "",
        timeStr: "",
        time: "",
        health: [],
        abnormal: [],
        death: [],
        hotheal: [],
        hotabnormal: [],
        hotdeath: [],
      }

    },
    mounted() {
      let _that = this;
      setTimeout(function () {
        _that.$refs.Mapc.creationMap();
      }, 300)
      this.getcount();
    },
    created() {
      this.areaId = window.sessionStorage.getItem('areaId');

    },
    methods: {
      drawbar(data, x, y, z) {
        let myChart = echarts.getInstanceByDom(document.getElementById('bar'));
        if (myChart == null) { // 如果不存在，就进行初始化
          myChart = echarts.init(document.getElementById("bar"));
        }
        const labelOption = {
          show: false,
          position: "insideBottom",
          distance: 19,
          align: 'left',
          verticalAlign: 'middle',
          rotate: 90,
          formatter: '{c}  {name|{a}}',
          fontSize: 12,
          rich: {
            name: {}
          }
        };
        let option = {
          title: {
            text: '各保护级别情况统计',
            x: 'center'
          },
          color: ["#21EB00", '#FFBE16', "#FF2626"],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '10%',
            right: '5%',
            bottom: '15%'
          },
          legend: {
            data: ['健康', '异常', '死亡'],
            y: '30'
          },
          xAxis: [
            {
              type: 'category',
              axisTick: {show: false},
              data: data,
              axisLabel: {
                interval: 0,
                rotate: 25
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '健康',
              type: 'bar',
              barGap: 0,
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: x
            },
            {
              name: '异常',
              type: 'bar',
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: y
            },
            {
              name: '死亡',
              type: 'bar',
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: z
            },
          ]
        };
        myChart.setOption(option);
        setTimeout(function () {
          myChart.resize();
        }, 10)
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },
      drawbar2(data, x, y, z) {
        let myChart = echarts.getInstanceByDom(document.getElementById('bar2'));
        if (myChart == null) { // 如果不存在，就进行初始化
          myChart = echarts.init(document.getElementById("bar2"));
        }

        const labelOption = {
          show: false,
          position: "inside",
          distance: 19,
          align: 'left',
          verticalAlign: 'middle',
          formatter: '{c}  {name|{a}}',
          fontSize: 12,
          rich: {
            name: {}
          }
        };
        let option = {
          title: {
            text: '各保护级别情况统计',
            x: 'center'
          },
          color: ["#21EB00", '#FFBE16', "#FF2626"],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '25%',
            right: '5%',
            bottom: '10%'
          },
          legend: {
            data: ['健康', '异常', '死亡'],
            y: '30'
          },
          xAxis: [
            {
              type: 'value'
            }

          ],
          yAxis: [
            {
              type: 'category',
              axisTick: {show: false},
              data: data
            }
          ],
          series: [
            {
              name: '健康',
              type: 'bar',
              barGap: 0,
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: x
            },
            {
              name: '异常',
              type: 'bar',
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: y
            },
            {
              name: '死亡',
              type: 'bar',
              label: labelOption,
              emphasis: {
                focus: 'series'
              },
              data: z
            },
          ]
        };
        myChart.setOption(option);
        setTimeout(function () {
          myChart.resize();
        }, 10)
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      },
      chooseTime(data) {
        if (data != null) {
          let year = data[0].getFullYear();
          let month = (data[0].getMonth() + 1) > 10 ? (data[0].getMonth() + 1) : "0" + (data[0].getMonth() + 1);
          let day = data[0].getDate() > 10 ? data[0].getDate() : "0" + data[0].getDate();

          let years = data[1].getFullYear();
          let months = (data[1].getMonth() + 1) > 10 ? (data[0].getMonth() + 1) : "0" + (data[1].getMonth() + 1);
          let days = data[1].getDate() > 10 ? data[1].getDate() : "0" + data[1].getDate();

          this.timeStr = year + '-' + month + '-' + day + '~' + years + '-' + months + '-' + days;
        } else {
          this.timeStr = '';
        }
        this.getcount()
      },
      getcount() {
        let _that = this;
        (async function f() {
          let res = await http.get(api.count + '?areaId=' + _that.areaId + '&timeStr=' + _that.timeStr)
          if (res.data.code == '200') {
            let o = res.data.data.levelCount;
            let z = res.data.data.siteCount;
            _that.drawbar(o.keyArray, o.healthArray, o.abnormalArray, o.deathArray);
            _that.drawbar2(z.keyArray, z.healthArray, z.abnormalArray, z.deathArray);
            _that.health = res.data.data.fenbuCount.health;
            _that.abnormal = res.data.data.fenbuCount.abnormal;
            _that.death = res.data.data.fenbuCount.death;
            _that.hotheal = res.data.data.heatMap.health;
            _that.hotabnormal = res.data.data.heatMap.abnormal;
            _that.hotdeath = res.data.data.heatMap.death;
          } else {
            _that.drawbar([], [], [], []);
            _that.drawbar2([], [], [], []);
            _that.$message({
              message: res.data.message,
              type: 'warning'
            });
          }
        })()
      },
      concatArr(data, type) {
        let icon = '', arr = [];
        if (type == 'jk') {
          icon = '../../static/images/jiankang_anchor_bottom_center.png.png'
        }
        if (type == 'yc') {
          icon = '../../static/images/yichang_anchor_bottom_center.png.png'
        }
        if (type == 'sw') {
          icon = '../../static/images/siwang_anchor_bottom_center.png.png'
        }
        data.forEach((e, index) => {
          let z = {
            id: type + index,
            name: "",
            borderColor: "",
            fillColor: "",
            iconSrc: icon,
            geojson: {coordinates: [e[0], e[1]], type: "Point"}
          }
          arr.push(z)
        })

        return arr;
      },
      drawPoint() {
        if (this.dr == 1) {
          let arr = [], Newarr = [];
          this.checkList.forEach(e => {
            if (e == '健康') {
              arr[0] = this.concatArr(this.health, 'jk');
            }
            if (e == '异常') {
              arr[1] = this.concatArr(this.abnormal, 'yc')
            }
            if (e == '死亡') {
              arr[2] = this.concatArr(this.death, 'sw');
            }
          })
          arr.forEach(k => {
            k.forEach(ki => {
              Newarr.push(ki)
            })
          })
          // console.log(Newarr);
          this.$refs.Mapc.previewshape(Newarr, 'dwfb');
        } else {
          let arr = [], Newarr = [];
          this.checkList.forEach(e => {
            if (e == '健康') {
              arr[0] = this.hotheal
            }
            if (e == '异常') {
              arr[1] = this.hotabnormal
            }
            if (e == '死亡') {
              arr[2] = this.hotdeath
            }
          })
          arr.forEach(k => {
            k.forEach(ki => {
              Newarr.push(ki)
            })
          })
          this.$refs.Mapc.drawHeatMap('dwfb', Newarr);
        }
      }
    }
  }
</script>

<style scoped>
  @import "../../static/css/statistics.css";
</style>

<style>
  .el-checkbox__label {
    font-size: .16rem !important;
  }
</style>
